<template>
  <el-dialog style="background-color: #EEEEF0" v-model="dialogVisible" title="账户充值" width="700"  :before-close="gocancel">
    <span style="color:#7B7C80;">您可在此页面选择合适的档位进行充值.</span>
    <div style="width: 653px;height: 0px;border: 1px solid #C6C7CC;margin:20px 0"></div>
    <div style="color:#ADAEB3;font-size:12px">充值金额(CNY)</div>
    <div class="moneyList">
      <div
        style="cursor: pointer; height: 36px; padding: 5px;"
        :class="moneyType == index? 'active' : 'moneyListMoney'"
        v-for="(item, index) in moneyList"
        :key="index"
        @click="selectMoney(item,index)"
      >
        <img  :src="moneyType == index? img2 : item.icon" style="width: 20px;height:20px;object-fit: contain;" />
        <div style="margin-left: 5px;font-size: 14px;font-weight: bold">{{item.money}}</div>
      </div>
      <div style="display: flex;align-items: center;">
        <img
          src="@/assets/image/mine/icon／money／black@2x.png"
          style="width: 16px;height:16px;object-fit: contain;"
        />
        <input type="number" style="border: none;border-bottom: 2px solid #606166;width:90px;margin-left:5px; background: none"  v-model="moneydata.balance"    @focus="handleFocus"  pattern="\d*"   @input="handleInput" />
        <div style="font-weight:bold">￥</div>
      </div>
    </div>
    <div style="color:#ADAEB3;font-size:12px;margin:20px">支付方式</div>
    <div class="payType">
    <div
      class="payTypeItem"
      :class="{
        'active-pay': payType == 1
      }"
      @click="payType = 1"
      style="width:30px;height:30px;"
    >
    <img src="@/assets/image/mine/weixin.png" alt="" style="width:100%;height:100%;object-fit: contain;"></div>
    <div
    :class="{
        'active-pay': payType == 3
      }"
      @click="payType = 3"
      class="payTypeItem"
      style="width:30px;height:30px;margin-left:20px"
    >
    <img src="@/assets/image/mine/zhifubao.png" alt="" style="width:100%;height:100%;object-fit: contain;"></div>
  </div>
    <div style="margin:20px;font-size:12px;color:#ADAEB3;">
      <div >用户须知 </div>
      <text style="display:inline-block;margin-top:5px"> · 建议充值金额2000人民币. (为达到更优投放效果, 建议您每次活动投放≥5000￥) </text>
      <text style="display:inline-block;margin-top:5px">  · 目前只支持借记卡充值. 若您在支付过程中出现任何问题, 都可以随时致电 400-6666-660 与我们取得联系.</text>
      <text style="display:inline-block;margin-top:5px"> · 如您需要开具专票, 那么您的支付账户和您填写的专票名称必须一致. 除此之外的其他情况恕不受理.</text>
      <text style="display:inline-block;margin-top:5px"> · 余额不足可能会影响您后续的任务生成和稿件撰写. 因此请保持余额充足以避免您产生不必要的时间损失. </text>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="gocancel()">取消</el-button>
        <el-button type="primary" @click="goPlay()">前往支付</el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script lang="ts" setup>
import { ref } from "vue";
import { ElMessageBox } from "element-plus";
import { useStore } from "@/store/index";
import { useRouter } from "vue-router";
const router = useRouter();
import { postplay } from "@/utils/api/customerService/index.ts";
import image  from "@/assets/image/mine/icon／money／black@2x.png"
import image2  from "@/assets/image/mine/icon／money／white@2x.png"
import EventBus from "@/utils/eventBus.js";

const payType = ref(1)
const img1 = ref(image)  
const img2 = ref(image2) 
const dialogVisible = useStore().dialogVisible;
const moneyType = ref(2);
const moneyList = ref([
  {
    icon: img1,
    money: "2000￥"
  },
  {
    icon: img1,
    money: "3000￥"
  },
  {
    icon: img1,
    money: "5000￥"
  },
  {
    icon: img1,
    money: "9999￥"
  }
]);
const moneydata = ref({
  balance: 5000,
  use_type:1

});
const selectMoney = (e, index) => {
  moneyType.value = index;
  moneydata.value.balance = e.money.replace("￥", "");
};
const handleFocus = () => { 
  moneyType.value = null
}
const gocancel = () => {
    useStore().setdialogVisible(false);
}
const handleInput = (event) => {
      // // 获取输入的值，并确保只保留整数部分
      let inputValue = event.target.value;
      // // 使用正则表达式确保只有数字，没有小数点
      // inputValue = inputValue.replace(/[^\d]/g, '');
      // // 更新 Vue 数据
      moneydata.balance = inputValue;
    }
    const goPlay = () => {
      if(moneydata.value.balance > 9999){
        EventBus.emit("openToastBox", ["金额不能大于9999"]);
        return;
      }
      const { public: { envUrl } } = useRuntimeConfig()
  console.log(envUrl)
      if (envUrl === 'production'){
      const regex = /\./;
      if(regex.test(moneydata.value.balance)){
        EventBus.emit("openToastBox", ["金额只能是整数"]);
        return;
      }
      }
      moneydata.value.use_type = payType.value;
      if(payType.value == 1){
        postplay(moneydata).then((res) => {
		const resData = JSON.parse(res.data.value);
      if (resData.code == 200) {

        useStore().setdialogVisible(false);
        let routeData = router.resolve({
          path:"/dimensional",
          query: {
            imgUrl:resData.result.code_url,
            money : moneydata.value.balance,
            order_num :resData.result.order_num,
          }
        });
        window.open(routeData.href);
    }

	});
} else{
        useStore().setdialogVisible(false);
        let routeData = router.resolve({
          path:"/dimensionalZfb",
          query: {
            money : moneydata.value.balance,
          }
        });
        window.open(routeData.href);
      }

    }
</script>
<style lang="scss" scoped>
.moneyList {
  display: flex;
  align-items: center;
  .active {
    background-color: #435fec;
    color: #fff !important;
    border-radius: 8px;
    margin: 12px;
    width: 93px;
    height: 36px;
    display: flex;
    align-items: center;
    padding: 5px;
  }
  .moneyListMoney {
    display: flex;
    align-items: center;
    margin: 12px;
    width: 93px;
    height: 36px;
    color: #333;
  }
}
.payType{
    display: flex;
    margin-left: 20px;
    .payTypeItem{
      cursor: pointer;
      padding: 10px;
      border-radius: 4px;
    }
    .active-pay {
      background: rgba(67, 95, 236, 0.1);
    }
  }
</style>
<style lang="scss">
.zhifubao-dialog{
.el-dialog__body{
  height: calc(100% - 40px);
  .zhifubao-dialog-content{
    width: 100%;
    height: 100%;
  }
}
}
</style>